<template>
    <div>
        <Card dis-hover>
            <div>
                <h1 style="text-align: center">我的书架</h1>
                <h3 style="margin-top: 20px;color: #888888">
                    赠言：以前我很少看书，觉得看书的效果不是那么明显；后来发现需要沉淀的时候，还是看书最能让人成长；
                    在这个物欲横流的时代，也希望大家能静下心来好好读几本书吧！即便不是为了提升自己，也希望能够让自己烦躁的心平静下来！</h3>
            </div>
        </Card>
        <div style="margin-top: 20px;display: flex;justify-content: space-evenly;flex-wrap: wrap;">
            <Card style="width: 280px;margin: 10px" v-for="(book,index) in bookList" :key="index">
                <div style="width: 140px;overflow: hidden;margin: auto"><img class="bookStyle" :src="book.bpicture"
                                                                             alt=""></div>
                <div style="text-align: center;font-weight: bolder;font-size: larger;">{{book.bname}}</div>
                <div style="text-align: center;color: #888888">{{book.bBooktime}}</div>
                <div style="margin: 10px auto">
                    <span style="font-weight: bolder;color: red">Edward有话说：</span>
                </div>
                <div style="margin-top: 4px">{{book.bdiscrible}}
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        bookList: []
      }
    },
    mounted () {
      this.getBooks()
    },
    methods: {
      getBooks () {
        this.$http.get('books').then(res => {
          res = res.data
          if (res.code === 0) {
            this.bookList = res.data
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      }
    }
  }
</script>

<style scoped>
    .bookStyle {
        width: 140px;
        transition: 0.5s;
    }

    .bookStyle:hover {
        transform: scale(1.2);
    }
</style>
